<template>
	<div class="login-body">
		<div class="login-container">
			<div class="logo-box">
				<a class="login-log">质量管理辅助系统QMS</a>
			</div>
			<div class="login-box">
				<el-form :model="loginForm" :rules="loginRules" ref="loginForm" status-icon hide-required-asterisk @keyup.enter.native="submitForm('loginForm')">
				  <el-form-item prop="username">
				    <el-input  v-model="loginForm.username" placeholder="请输入用户名"></el-input>
				  </el-form-item>
				  <el-form-item prop="password">
				    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button class="login-btn pan-btn primary-noborder-btn" type="success" :loading="logning" @click="submitForm('loginForm')">登录</el-button>
				  </el-form-item>
				</el-form>
			</div>
			<div class="login-container-foot">四川太平洋药业有限责任公司</br>© 2022 Power By 信息部</div>
		</div>
	</div>
</template>


<script>
	import {getUUID, getUrlParam, setCookie} from '@/common/js/utils'
	import {URL, CODE_OK, TOKEN_KEY} from '@/common/js/config'
	import {loginByUser} from '@/api/user'
	import {mapMutations} from 'vuex'
  	export default {
	    data() {
	      return {
	      	redirect: getUrlParam('redirect') || '/',
	        loginForm: {
	          username: '',
	          password: ''
	        },
	        loginRules: {
	          username: [
	            { min: 3, max: 25, required: true, message: '请输入3至25个字符', trigger: 'blur' }
	          ],
	          password: [
	          	{ min: 6, required: true, message: '请输入不少于6个字符的密码', trigger: 'blur' }
	          ]
	        },
	        logning: false
	      }
	    },
	    methods: {
		    submitForm(form) {
		    	this.logning = true
          this.$refs[form].validate(valid => {
            if (valid) {
                loginByUser(this.loginForm).then(res => {
                  if (res.code === CODE_OK) {
                    this.updateUserInfo(res.user)
                    setCookie(TOKEN_KEY, res.token)
                    let _this = this
                    $.ajax({
                      url: 'http://fr.btyy.com:9999/webroot/decision/login/cross/domain?fine_username='+this.loginForm.username+'&fine_password='+this.loginForm.password+'&validity=-1',
                      timeout: 5000,
                      dataType:"jsonp",
                      jsonp:"callback",
                      success: function (res) {
                        if (res.errorCode) {
                          _this.$message.error("OA密码与QMS密码不一致，无法完成同时登录，若查看报表请手动登录")
                        }
                        _this.go()
                      },
                      error: function () {
                        _this.$message.error("登录OA超时或者服务器内部错误")
                        _this.go()
                      }
                    })
                  } else {
                    this.logning = false
                    this.$message({
                      message: res.msg,
                      type: 'error',
                      duration: 1500
                    })
                  }
                }).catch(() => {
                  this.loading = false
                })
            } else {
              this.logning = false
                return false
            }
          })
		    },
        go() {
          this.$router.push(this.redirect, () => {
            location.reload()
          })
        },
		    ...mapMutations([
		    	'updateUserInfo'
		    ])
	    }
  }
</script>

<style scoped>
	.login-box{
		position: absolute;
    margin-top: 60%;
    padding: 70px 60px 80px;
    width: 450px;
    background-color: #608bb566;
    box-shadow: 9px 9px 13px 2px #436a9b;
	}
	.login-body{
		background: url(../../assets/img/btyy-bg.jpg) no-repeat;
		overflow: hidden;
		background-size:cover;
    color: #FFF;
    height: 100%;
    width: 100%;
	}
	.login-container{
		height: 100%;
    left: 36%;
    width: 450px;
    position: absolute;
	}
	.login-btn{
		width: 100%;
		margin-top: 38px;
	}
	.login-title{
		margin-bottom: 70px;
    text-align: center;
	}
	.login-log{
		font-size: 44px;
    color: #FFF;
    font-weight: bold;
	}
	a:hover {
  	color: white;
	}
	.login-container-foot{
	  text-align: center;
    position: absolute;
    margin-top: 153%;
    width: 100%;
	}
	.logo-box{
    text-align: center;
		position: absolute;
    margin-top: 44%;
    width: 100%;
	}
</style>
